<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta content="telephone=no" name="format-detection">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>充值</title>
        <script src="https://cdn.bootcss.com/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <!-- 微派-H5支付 -->
    </head>
    <body>
        位置：<a href="{:url('index/index')}">首页</a> &raquo; 充值
        <form method="post" action="{:url('finance.wiipayh5/doWiipayh5')}">
            <div>充值金额：<input type="number" name="amount" step="10" min="10" placeholder="金额" value="10" required="required" />元</div>
            <div>1元=10个竞猜币，10元起冲，只能充10元的倍数。</div>
            <div><button type="submit" id="buyButton">充值</button></div>
            {:token()}
        </form>        
        <script type="text/javascript" src="/public/static/js/jquery-3.2.1.min.js"></script>
        <!-- #################微派支付--H5支付--集成示例2.0#################开始######################-->
        <!--1.添加控制台活的的script标签，实际项目中请替换真实appId-->
        <script id="wpay-jspay-script" src="http://jspay.wiipay.cn/1/jspay/wpayscripts.do?appId=3db1cffa7cdd7c68b80d8775dc61b5e2"></script>
        <script>
            $('button').click(function () {
                var $form = $('form');
                $.post($form.attr('action'), $form.serialize(), function (msg) {
                    if(!msg.success){
                        alert(msg.message);
                        return;
                    }
                    WP.click(msg.message);
                    /**
                     * click调用错误返回：默认行为console.log(err)
                     */
                    WP.err = function (err) {
                        //err 为object, 例 ｛"ERROR" : "xxxx"｝;
                        console.log(err);
                    }
                })
                //wiih5pay();
                return false;
            })
            function wiih5pay() {
                /**
                 * 2. 需要支付时调用WP.click接口传入参数
                 */

                var app_id = "3db1cffa7cdd7c68b80d8775dc61b5e2";//微派分配的appId,联系运营人员获取，实际项目中请替换真实appId
                var body = "在线充值"; //商品名称，必填项，请勿包含敏感词
                var callback_url = "http://jspay.wiipay.cn/1/jspay/result.do";//支付成功后跳转的商户页面(用户看到的页面)
                var channel_id = "default";//渠道编号
                var out_trade_no = (new Date().getTime()) + ""; //商户单号，确保不重复，如想透传更多参数信息，建议以Json-->String->Base64编码后传输，必填项
                var total_fee = "0.01";//商品价格(单位:元)，必填项
                var version = "2.0"; //版本号，默认填写2.0即可，必填项

                var key = "CRCBwJce5ku88n8LSEbRWTg5dWAkJBiq";//签名所需key,联系运营人员获取

                //本签名示例，仅为了演示，实际项目中为了安全考虑，请勿将key对外。字符串拼接规则为，参与签名的参数，按字母序key=value方式然后加上key进行md5,最后sign转大写
                var sign_prep = "app_id=" + app_id + "&body=" + body + "&callback_url=" + callback_url + "&channel_id="
                        + channel_id + "&out_trade_no=" + out_trade_no + "&total_fee=" + total_fee + "&version=" + version + key;

                var sign = md5(sign_prep).toUpperCase();//签名串,签名规则:MD5，utf-8

                WP.click({
                    //"instant_channel":"ali",//配置默认支付方式，当仅有一个支付方式时，不会弹出收银台，会直接跳转到支付界面；支付宝ali，微信公众号wx，银联un，网银wy，此参数不参与签名
                    "debug": 1, //开启调试模式，会显示错误信息，注意，上线后需要去掉，此参数不参与签名
                    "body": body,
                    "callback_url": callback_url,
                    "channel_id": channel_id,
                    "out_trade_no": out_trade_no,
                    "total_fee": total_fee,
                    "sign": sign,
                    "version": version
                });


                /**
                 * click调用错误返回：默认行为console.log(err)
                 */
                WP.err = function (err) {
                    //err 为object, 例 ｛"ERROR" : "xxxx"｝;
                    console.log(err);
                }
            }

        </script>
        <!-- #################微派支付--H5支付--集成示例2.0#################结束######################-->
    </body>
</html>
